<template>
  <div id="nav">
    <van-tabbar v-model="active">
      <van-tabbar-item nav="chat_list" icon="chat-o" @click="goFooterNavAction(0)" >消息</van-tabbar-item>
      <van-tabbar-item nav="friend_list" icon="friends-o" @click="goFooterNavAction(1)">好友</van-tabbar-item>
      <van-tabbar-item nav="TaskList" icon="calender-o" @click="goFooterNavAction(2)">任务</van-tabbar-item>
      <van-tabbar-item nav="space" icon="star-o" @click="goFooterNavAction(3)">动态</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: "FooterNav",
  data() {
      return {
          active : '',
          footerClass : 'van-tabbar-item--active',
          footerHref : ['chat_list','friend_list','TaskList','space']
      }
  },
  methods: {
    goFooterNavAction : function(index){
      var nowRouteName = this.$route.name,
          nowRouteIndex = this.footerHref.indexOf(nowRouteName),
          path = this.footerHref[index];
      if(index < nowRouteIndex){
        this.$router.back = true;
      }
      this.$router.push({ path: path });
    }
  },
  mounted(){
    var nowNav = this.footerHref[this.active];
    document.querySelectorAll("#nav div.van-tabbar-item[nav='" + nowNav + "']").forEach(function(elem){
      elem.setAttribute("class","van-tabbar-item van-tabbar-item--active");
    });
  },
  created(){
    this.active = this.$attrs.active;
  }

};
</script>
<style>
  #nav{
    position: fixed;
  }
</style>